<template>
  <div id="j-video-page" class="video-page" style="display: block">
    <!--视频部分 start-->
    <div id="PlayerContainer" class="video-play">

    </div>
    <!--视频部分 end-->

    <!--聊天部分 start-->
    <div class="video-pane" style="-webkit-tap-highlight-color:rgba(0,0,0,0); " @click="setFocus()">
      <div class="video-pane-head">
        <player-info :playInfo="playerInfo.anchor" :address="this.playerInfo.living.address"></player-info>
      </div>
      <div ontouchstart="return false;"  class="coming-panel" v-if="memberId && userSig">
        <span id="totalMemberNum">{{this.playerInfo.living.totalMemberNum}}</span>人观看&nbsp;&nbsp;<span id="buyingName"></span>
      </div>
      <div class="other-info-panel" v-if="memberId && userSig">
        <div class="buying-panel">
          <span ontouchstart="return false;" class="block-span">{{buyingName}}等{{buyingNum}}人正在购买</span>
        </div>
        <ul class="video-sms-list" id="video_sms_list">
        </ul>

        <div class="player-say-panel" id="player-say-panel">
          <span class="block-span">
            <span class="player-name">主播发言&nbsp;&nbsp;</span><span id="player-say">谢谢大家的支持，我会继续努力的</span>
          </span>
        </div>
        <!--<div class="talking-panel">
          <span class="block-span"><span class="name">小小&nbsp;&nbsp;</span>超级超级好吃</span>
        </div>-->
      </div>
    </div>

    <!--
    <div style="color: #ffffff;position: absolute;width: 100%;bottom: 4rem">{{oldBodyScollTop}}&nbsp;{{oldBodyScollHeight}}&nbsp;{{oldElemScrollTop}}&nbsp;{{oldElemScrollHeight}}</div>
    -->

    <form class="say-form" id="say-form" :class="{'focus-form': focusForm}" v-if="memberId && userSig">
      <span class="shopping-span" @click="getGoodsList" :class="{'hidden': focusForm}">
        <img src="../assets/img/shopping.png">
      </span>
      <span class="say-span">
        <input type="text" style="color: #000;" class="say-input" maxlength="100" @keyup.enter="submit" placeholder="跟主播聊点什么?" id="send_msg_text" @focus="scrollContent" @blur="clearSrcoll"/>
      </span>
        <!--<span class="btn-span"><input type="button" value="发送" @click="sendMsg"/></span>-->
      <span class="share-span" id="share-span" @click="showShare" :class="{'hidden': focusForm}">
        <img src="../assets/img/drop_out.png" v-if="active">
        <img src="../assets/img/report.png"  v-else>
        <div class="hidden-panel" :class="{'active': active}">
          <!--<div class="fenxiang">分享</div>-->
          <div class="jubao" @click="gotoReport">举报</div>
        </div>
      </span>
      <span class="like-span" id="like-span" @click="sendLoveMsg" :class="{'hidden': focusForm}">
        <img src="../assets/img/live_icon_heart.png" id="afterLike" style="display: none;">
        <img src="../assets/img/live_icon_good.png" id="beforeLike">
        <!--<span class="like-num" id="like-num">{{playerInfo.living.likeNum}}</span>-->
        <span class="like-num" id="like-num">{{ likeNumSelf }}</span>
      </span>
      <span class="btn-span" :class="{'hidden': !focusForm}">
        <button type="button" style="border:none;background: none;color: white;line-height: 2rem;font-size: 0.8rem;" @click="sendMsg">发送</button>
      </span>
    </form>

    <!--<form class="say-form focus-form" id="say-form" :class="{'hidden': !focusForm}" v-if="memberId && userSig">
      <span class="say-span">
        <input type="text" class="" maxlength="100" placeholder="跟主播聊点什么?" id="send_msg_text" @focus="scrollContent" @blur="clearSrcoll"/>
      </span>
      <span class="btn-span">
        <button type="button" style="border:none;background: none;color: white;line-height: 2rem;font-size: 0.8rem;" @click="sendMsg">发送</button>
      </span>
    </form>-->
    <!--<div class="say-form" v-else>
    </div>-->
    <button type="button" class="login-btn" @click="login" v-if="(!memberId || !userSig)">登录</button>
    <!--聊天部分 end-->

    <!--商品列表-->
    <mt-popup
      v-model="popupVisible"
      position="bottom" id="wrapper-popup">
      <div class="close" @click="popupVisible = false" style="border-bottom: 1px solid #e6e3e3;margin: 0 2.5% 0 2.5%;">
        <span style="float: left;font-size: .7rem;display: inline-block;padding-left: 0rem;">
          <img src="../assets/img/shop0.png" width="16px" height="16px" style="vertical-align: middle">&nbsp;全部宝贝&nbsp;<span style="color: #ff306f">{{total}}</span></span>
        <img src="../assets/img/close.png" style="width:.8rem;padding-top:.35rem;padding-right: 0rem" />
      </div>
      <div style="position: relative; width:100%; height:100%;">
        <div id="wrapper">
        <div id="scroller" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);">
          <ul class="goods-list">
            <li class="goods-item" v-for="item in goods">
                <a class="jumpHref"  :href="playerInfo.goToGoodsDetail + item.goodsSn + '?liveId='+ id"></a>
                <div class="img-panel"><img :src="this.ossUrl + item.goodsImagePath"/></div>
                <div class="goods-info">
                  <p class="goods-name">{{item.goodsName}}</p>
                  <p class="goods-guige" v-for="item in item.productList" v-if="item.default">规格：{{item.productName}}</p>
                  <div class="cart-panel">
                    <span class="goods-price" v-for="item in item.productList" v-if="item.default">¥{{item.salePrice}}</span>
                    <a href="javascript:void(0);" class="cart-add" @click="showGuige(item); return false">加入购物车</a>
                  </div>
                </div>
            </li>
          </ul>
          <div @click="getGoodsList0" v-if="hasNextPage" class="loading-more">加载更多...</div>
          <p style="color:#b2b2b2;font-size: 12px;" v-if="!hasNextPage && goods.length > 0"> 没有更多数据了！</p>
          <p style="color:#b2b2b2;font-size: 12px;" v-if="!hasNextPage && goods.length <= 0"> 暂时没有商品哦～</p>
        </div>
      </div>
      </div>
    </mt-popup>

    <!--商品规格-->
    <mt-popup
      v-model="popupVisible2"
      position="bottom">
      <div class="close" @click="popupVisible2 = false" style="border-bottom: 1px solid rgb(230, 227, 227);margin: 0 2.5% 0 2.5%;">
        <img src="../assets/img/close.png" style="width:.8rem;padding-top:.35rem;padding-right: 0rem" />
      </div>
      <div class="goods-list">
        <div class="goods-item">
          <div class="img-panel"><img :src="this.ossUrl+currentItem.goodsImagePath"/></div>
          <div class="goods-info">
            <p class="goods-name" style="color:#ff4b4b">¥{{currentProduct.salePrice}}</p>
            <p class="goods-guige">库存：{{currentProduct.store}}</p>
            <p class="goods-selected">已选择：{{currentProduct.productName}}</p>
          </div>
        </div>
        <div class="goods-guigelist">
          <p class="guige-title">请选择规格</p>
          <div class="guige-list">
            <span class="guige-item" :class="{'active': item.active }" v-for="item in currentItem.productList" @click="changeGuige(item)" >{{item.productName}}</span>
          </div>
        </div>
        <div class="goods-num-panel">
          <div class="num-title"><p class="title">请选择数量</p></div>
          <div class="selected-num">
            <div class="num-box">
              <span @click="minus">-</span>
              <input type="number" v-model="num">
              <span @click="plus">+</span>
            </div>
          </div><!---->
        </div>

        <div class="handle-panel">
          <div class="cart-btn" @click="addCart">加入购物车</div>
          <div class="detail-btn">
            <a :href="playerInfo.goToGoodsDetail + currentItem.goodsSn + '?liveId='+ id">
              查看商品详情
            </a>
          </div>

        </div>
      </div>
    </mt-popup>

    <div id="closeMask" class="Mask-panel" style="height:65%;" :class="{'show': !closeMask}">
      <div class="img-panel" @click="playPlayer">
        <img src="../assets/img/playerIcon.png">
      </div>
    </div>
  </div>

<!--
  <div class="player-warp">
    <div id="id_test_video" class="id_test_video"></div>
  </div>
-->

</template>

<script>
  import PlayerInfo from './common/PlayerInfo.vue';
  import util from '../common/util.js';
  import { Toast } from 'mint-ui';

  import wx from 'weixin-js-sdk';

  export default {
    data () {
      return {
        id: this.$route.query.id || null,
        active: false,
        focusForm: false,
        ossUrl:window.ossUrl,
        playerInfo: {
          living: {},
          anchor: {},
          memberInfo: {}
        },
        popupVisible: false,
        popupVisible2: false,
        goods: [],
        num: 1,
        currentItem: {},
        currentProduct: {},
        userInfo: {},
        memberId: '',
        userSig: '',
        token: '',
        surname: ['李**','赵**','钱**','孙**','周**','吴**','郑**','王**','彭**','吕**'],
        buyingName: '',
        buyingNum: 1,
        baseURL: window.baseURL,


        sUserAgent: '',
        bIsIpad: '',
        bIsIphoneOs: '',
        bIsAndroid: '',
        bIsPc: '',
        weixin: '',
        qq: '',
        weibo: '',
        onClick: '',

        isFirstTimePlay: false,
        playOnError: false,
        _reloadTimer: '',

        player: null,
        closeMask: false,
        loading: false,

        pageNum: 0,
        total: 0,
        pages: 0,
        hasNextPage: true,
        params: {
          currentPage: 1,
          pageSize: 20,
          livingId: this.$route.query.id
        },

        alloyTouch: null,
        min: 0,
        max: 0,
        likeSuccess: window.likeSuccess,
        interval: null,

        oldBodyScollTop: 0,
        oldBodyScollHeight: 0,

        newBodyScollTop: 0,
        newBodyScollHeight: 0,

        oldElemScrollTop: 0,
        oldElemScrollHeight: 0,

        newElemScrollTop: 0,
        newElemScrollHeight: 0,

        // 自定义点赞数量
        likeNumSelf:0,

      }
    },
    watch:{
    	'num':function(newVal,oldVal){
    		const regex = /^([0-9]*[1-9][0-9]*(.[0-9]+)?|[0]+.[0-9]*[1-9][0-9]*)$/
        if(!regex.test(newVal)) {//如果小于等于零
            this.num = oldVal //恢复原值
        }
    	}
    },
    components: {
      PlayerInfo
    },
    computed: {},
    beforeMount(){

    },
    created(){

    },
    mounted(){
      this.getLivingInfo();
      //this.entryCount(); //现在不需要了
      setInterval(this.refresh,5000);
      // alert(navigator.userAgent)
      // alert(window.iosVersion.indexOf('11') == 0);
    },
    activated(){

    },
    beforeDestroy() {
      this.player.destroy();
      // alert('destroy');
      window.clearInterval(window.playerTimer);
    },
    methods: {
      getCookie: util.getCookie,
      setCookie: util.setCookie,
      formatDate: util.formatDate,

      initAlloyTouch() {
        let scroller = document.getElementById("scroller");
        let that = this;

        this.alloyTouch = new AlloyTouch({
          touch: "#wrapper",
          vertical: true,
          target: scroller,
          property: "translateY",
          maxSpeed: 2,
          outFactor: 0.1,
          min: that.min,
          max: 0,
          lockDirection: false,
          touchStart: function () {

            this.reastMin(scroller);
          },
          change: function (v) {
            if (v <= that.min + 5 && !that.loading) {
              this.getGoodsList();
            }
          }
        })
      },

      reastMin(scroller) {
        this.alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + document.getElementById('wrapper-popup').innerHeight - 202;
      },


      initVideo2() {
        var autoplay = false;
        if(window.sys !="Android" && window.agent != "weixin"){//不是android版微信
            autoplay = true;
        }

        let that = this;
        let player = new TcPlayer('PlayerContainer', {
          "m3u8": this.playerInfo.living.pullHlsUrl,
          "flv": this.playerInfo.living.pullFlvUrl, //增加了一个flv的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
          "autoplay" : autoplay,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
          "controls": "none",
          "live": true,
          "x5_type": "h5",
          "x5_fullscreen": true,
          "systemFullscreen": true,
          "x5_player": true,
          "x5_orientation": 1,
          "coverpic" : {"style": "cover", "src":this.playerInfo.living.coverUrl},
          "width" :  '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
          "height" : '100%',
          "wording": {
            4: "主播已经离开"
          },
          "listener": function(msg){
            // console.log(msg);
            if(msg.type == 'error'){
              window.setTimeout(function(){
                player.load();//进行重连
              },5000);
            }
            if(msg.type == 'load'){
             // player.play();
              if(wx_config){
                wx.config(wx_config);
                wx.ready(function(){
                  console.log("===================redy to play===================");
                  if(window.sys != "Android"){
                    player.play();
                    document.getElementById("closeMask").setAttribute("style","display:none");
﻿                   setTimeout(function () {
                      var isPlaying = player.playing();
                      if(!isPlaying){
                        location.reload();//仍然没有播放
                      }
                     }, 2500);
                  }else{//android
                    //android
                    window.playerTimer = window.setInterval(function(){
                        var isPlaying = player.playing();
                        //alert(isPlaying)
                        if (!isPlaying) {
                          //alert("显示播放按钮")
                          document.getElementById("closeMask").setAttribute("style","display:block");
                        }else{
                          document.getElementById("closeMask").setAttribute("style","display:none");
                        }
                    }, 2000);

                  }


                  //分享
                  var title = this.playerInfo.living.title;
                  var desc  = this.playerInfo.living.title;
                  var shareUrl = document.location.protocol + "//" + document.domain + "/share?type=1&id" + this.playerInfo.living.id;
                  var imgUrl = this.playerInfo.living.coverUrl;
                  wx.onMenuShareTimeline({
                      title: title, // 分享标题
                      link: shareUrl, // 分享链接
                      imgUrl: imgUrl, // 分享图标
                      success: function () {
                          // 用户确认分享后执行的回调函数
                          // alert("分享成功")
                      },
                      cancel: function () {
                          // 用户取消分享后执行的回调函数
                          //alert("CANCEL")
                      }
                  });


                  wx.onMenuShareAppMessage({
                      title: title, // 分享标题
                      desc: desc, // 分享描述
                      link: shareUrl, // 分享链接
                      imgUrl: imgUrl, // 分享图标
                      type: 'link', // 分享类型,music、video或link，不填默认为link
                      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                      success: function () {
                          // 用户确认分享后执行的回调函数
                          //alert("分享成功")
                      },
                      cancel: function () {
                          // 用户取消分享后执行的回调函数
                          //alert("CANCEL")
                      }
                  });

                });
              }

            }
          }
        });

        this.player   = player;
        window.player = player;

        if(window.sys !="Android" && window.agent != "weixin"){//不是android版微信
            document.getElementById("closeMask").setAttribute("style","display:none");
        }
      },

      /**
       * 获取直播信息
       */
      getLivingInfo() {
        this.httpGet(this.API.livingInfo, {id: this.id}).then((res) => {
          if (res) {
            this.playerInfo = res.data;
            if(this.playerInfo.living.status === 2){
              this.$router.push({name: 'End', query: { sellerId: this.playerInfo.anchor.sellerId,avatar:this.playerInfo.anchor.avatar,nickname:this.playerInfo.anchor.nickname, isEnd: true}});
            }
            if(this.playerInfo.living.status === 3){
              this.$router.push({name: 'End', query: { sellerId: this.playerInfo.anchor.sellerId,avatar:this.playerInfo.anchor.avatar,nickname:this.playerInfo.anchor.nickname,status:this.playerInfo.living.status, isEnd: true}});
            }
            this.memberId = this.playerInfo.memberInfo.memberId;
            this.userSig = this.playerInfo.memberInfo.userSig;
            window.totalMemberNum = this.playerInfo.living.totalMemberNum;
            window.likeNum = this.playerInfo.living.likeNum;
            window.loginInfo = this.playerInfo.memberInfo;
            window.playerInfo = this.playerInfo;


            if(this.playerInfo.living.likeNum > 9999) {
              this.likeNumSelf = ( this.playerInfo.living.likeNum /10000).toFixed(1)+'万'
            }
            else {
              this.likeNumSelf = this.playerInfo.living.likeNum
            }

            //this.initVideo();
            this.initVideo2();
            this.initLogin(this.playerInfo);
            setTimeout(()=>{
              this.oldBodyScollTop = document.body.scrollTop;
              this.oldBodyScollHeight = document.body.scrollHeight;
              this.oldElemScrollTop = document.getElementById('say-form').scrollTop;
              this.oldElemScrollHeight = document.getElementById('say-form').scrollHeight;
              this.sendLoginMsg();
            },5000);
            // this.sendLoginMsg();
          }
        })
      },

      showShare() {
        this.active = !this.active;
        if(this.active){
          // $("#share-span").addClass("bg3");
        }else{
          // $("#share-span").removeClass("bg3");
        }
      },

      /**
       * 跳转到举报页面
       */
      gotoReport() {
        this.$router.push({name: 'Report', query: {id: this.id}});
      },

      /**
       * 获取商品列表
       */
      getGoodsList() {
        this.popupVisible = true;
        this.loading = true;
        this.params.currentPage =1;
        this.httpPost(this.API.livingGoods, this.params).then((res) => {
          if (res) {
            this.loading = false;
            let data = res.data;
            this.goods = data.list;
            this.hasNextPage = data.hasNextPage;
            this.pageNum = data.pageNum;
            this.pages = data.pages;
            this.total = data.total;
            this.params.currentPage++;
            this.goods.forEach((item) =>{
              item.productList.forEach((productItem) =>{
                productItem.salePrice = parseFloat(productItem.salePrice).toFixed(2);
              })
            })
          }

        })
      },

      getGoodsList0() {
        this.popupVisible = true;
        this.loading = true;
        this.httpPost(this.API.livingGoods, this.params).then((res) => {
          if (res) {
            this.loading = false;
            let data = res.data;
            this.goods = this.goods.concat(data.list);
            this.hasNextPage = data.hasNextPage;
            this.pageNum = data.pageNum;
            this.pages = data.pages;
            this.total = data.total;
            this.params.currentPage++;
            this.goods.forEach((item) =>{
              item.productList.forEach((productItem) =>{
                productItem.salePrice = parseFloat(productItem.salePrice).toFixed(2);
              })
            })
          }

        })
      },

      showPop() {
        this.popupVisible = true;
        this.min = 160 * -20 + document.getElementById('wrapper-popup').innerHeight - 202 - 50;
        this.initAlloyTouch();
        this.getGoodsList();
      },

      /**
       * 加
       */
      plus() {
        if(this.num < 100){
          this.num ++ ;
        }
      },

      /**
       * 减
       */
      minus() {
        if(this.num > 1){
          this.num -- ;
        }
      },

      /**
       * 显示规格信息
       */
      showGuige(item) {
        this.currentItem = item;
        this.currentItem.productList.forEach((item,index) =>{
          if(item.default){
            item.active = true;
            this.currentProduct = item;
          }else{
            item.active = false;
          }
        })

        this.popupVisible2 = true;
      },

      /**
       * 选择规格
       */
      changeGuige(currentItem) {
        this.currentItem.productList.forEach((item,index) =>{
          if(item.id === currentItem.id){
            item.active = true
          }else {
            item.active = false
          }
        })
        this.currentProduct = currentItem;
      },

      addCart() {
        let params = {
          pId: this.currentProduct.productId,
          quantity: this.num,
          liveId: this.id
        }

        let that = this;
        $.post('/shop/cartItem/addCart',params,(data)=> {
          var res = JSON.parse(data);
          var msg = res.message;
          Toast({
            message: msg,
            duration: 1500
          });
          if (res.status = "success") {
            that.popupVisible  = false;
            that.popupVisible2 = false;
            }
        });
      },

      login() {
        this.setCookie('currentUrl', location.href);
        location.href = this.baseURL + '/wechat/union/authen';
      },

      initLogin(livingInfo) {
        //sdk登录
        sdkLogin0(livingInfo);
      },

      /**
       * 发送信息
       */
      sendMsg() {
        this.focusForm = false;
        onSendMsg();
      },

      /**
       *  点赞
       */
      sendLoveMsg() {
        // $("#like-span").addClass("bg3");
        sendGroupLoveMsg();
        /**  现在不需要调用后台接口了
        this.httpPost(this.API.livingLike, params).then((res) => {
          if (res) {
            Toast({
              message: '点赞成功',
              duration: 1500
            });
          }
        })**/
      },

      /**
       *  统计进入直播间的人数
       */
      entryCount() {
        let params = {
          livingId: this.id
        }
        /*
        this.httpPost(this.API.livingEntry, params).then((res) => {
          if (res) {

          }
        })*/
      },

      /**
       * 统计观看的人数
       */
      getEntryCount() {
        this.httpGet(this.API.livingInfo, {id: this.id}).then((res) => {
          if (res) {
            this.playerInfo = res.data;
            if(this.playerInfo.status === 2){
              this.$router.push({name: 'End', query: { sellerId: this.playerInfo.anchor.sellerId,startDate: this.playerInfo.anchor.startDate,avatar:this.playerInfo.anchor.avatar,nickname:this.playerInfo.anchor.nickname, isEnd: true}});
            }
          }
        })
      },

      refresh() {
        // alert("我3秒出来一次.");
        let index = parseInt(Math.random() * 10);
        this.buyingName = this.surname[index];
        this.buyingNum = parseInt(Math.random() * 10) + 1;
        // this.getEntryCount();
      },

      /**
       * 通知其他用户我进入了房间
       */
      sendLoginMsg() {
        if(this.memberId && this.userSig) {
          sendCustomLoginMsg(2);
        }
      },

      playPlayer() {
        if(this.player){
          this.player.play();
          // this.player.fullscreen(true);
          this.closeMask = true;
        }
      },
      getScrollTop() {
          var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
          return scrollTop;
      },
      setScrollTop(scroll_top) {
          document.documentElement.scrollTop = scroll_top;
          window.pageYOffset = scroll_top;
          document.body.scrollTop = scroll_top;
      },
      setFocus(){
        this.focusForm = false;
        if(window.sys !="Android"){
          $("#say-form").css("bottom","0.5rem");
        }
      },
      setInputFocus(){
        if(window.sys !="Android"){
          $("#say-form").css("bottom","0.5rem");
        }
        this.focusForm = true;
        setTimeout(()=>{
          let pFocus = document.getElementById('send_msg_text');
          pFocus.focus();
          // pFocus.select();
          console.log(pFocus);
        },100)
      },
      scrollContent() {
        this.focusForm = true;
        var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        ver = parseInt(ver[1], 10);

        if(window.sys !="Android"){
          setTimeout(()=>{

            this.oldBodyScollTop = document.body.scrollTop;
            this.oldBodyScollHeight = document.body.scrollHeight;
            this.oldElemScrollTop = document.getElementById('say-form').scrollTop;
            this.oldElemScrollHeight = document.getElementById('say-form').scrollHeight;

           // 如果是版本11
            if (ver>10) {
                if(this.oldBodyScollHeight == 603){
                    if(this.oldBodyScollTop <=260){
                        $("#say-form").css("bottom","74px");
                    }else if(this.oldBodyScollTop >260 && this.oldBodyScollTop <= 302){
                        $("#say-form").css("bottom","22px");
                    }else if(this.oldBodyScollTop >302 && this.oldBodyScollTop < 334){
                        $("#say-form").css("bottom","34px");
                    }else{
                        $("#say-form").css("bottom","0.5rem");
                    }
                }else if(this.oldBodyScollHeight == 672){//plus
                    if(this.oldBodyScollTop <=270){
                        $("#say-form").css("bottom","74px");
                    }else if(this.oldBodyScollTop >270 && this.oldBodyScollTop <= 315){
                        $("#say-form").css("bottom","22px");
                    }else if(this.oldBodyScollTop >315 && this.oldBodyScollTop < 347){
                        $("#say-form").css("bottom","34px");
                    }else{
                        $("#say-form").css("bottom","0.5rem");
                    }
                }
            }

          },500)

          // 如果是版本11
          if (ver>10) {
            return;
          }
          // document.getElementById('say-form').scrollIntoView(true);
          // document.getElementById('say-form').setAttribute("style","padding-bottom:1px");
          this.interval = setInterval(() => {
            this.scrollToEnd();
          }, 500)
        }

      },
      scrollToEnd() {
        // document.getElementById('say-form').scrollTop = document.getElementById('say-form').scrollHeight;
        document.body.scrollTop = document.body.scrollHeight;
        //.scrollTop(height+10);//移动到最底部
      },

      clearSrcoll() {
        setTimeout(()=>{
           if(window.sys !="Android"){

                 this.focusForm = false;
                 var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                 ver = parseInt(ver[1], 10);
                 if(ver>10){
                    $("#say-form").css("bottom","0.5rem");
                 }

           }

          this.oldBodyScollTop = document.body.scrollTop;
          this.oldBodyScollHeight = document.body.scrollHeight;
          this.oldElemScrollTop = document.getElementById('say-form').scrollTop;
          this.oldElemScrollHeight = document.getElementById('say-form').scrollHeight;
        },100)
        if(this.interval){
          // document.getElementById('say-form').setAttribute("style","padding-bottom:0");
          clearInterval(this.interval);
        }
      }
    }
  }
</script>

<!--<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer.js" charset="utf-8"></script>-->

<style lang="scss"></style>
